<template>
	<div id="">
		<div :class="[ 'ov' , opKey ? 'on':'']" @click="OpClose"></div>

		<div class="pop key" :class="[ 'pop key' , opKey ? 'on':'']">
			<div class="tit">{{$t('page.Invite')}}</div>
				<div class="input">
					<!-- <span class="iconfont icon-mima f-c-lan"></span> -->
					<input name="key" type="text" v-model="inp_invite" 
					:placeholder="$t('page.input_invite')" />
				</div>

				<div class="f-btn">
					<div class="btn-border">
						<div class="sub" @click="OpClose">{{$t('page.Cancel')}}</div>
					</div>
					<div class="btn-border">
						<div class="sub on" @click="FormKey()">{{$t('page.Revise')}}</div>
					</div>
				</div>
		</div>

	</div>
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant';
	export default {
		name: "Invite",
		data() {
			return {
				opKey: false,
				inp_invite: ''
			}
		},
		methods: {
			show(e) {
				this.opKey = true;
			},
			OpClose() {
				this.opKey = false;
				this.btn_click=true
			},
			async FormKey() {
				var _this = this
				var address = this.$dapp.getAddress();
				console.log(this.inp_invite)
				if (!address) {
					Toast.fail(this.$t('tis.addressNo'))
					console.log("没有地址")
					return;
				} else if (this.inp_invite == '') {
					Toast.fail(this.$t('page.input_invite'))
					console.log(this.inp_invite)
					console.log("填写错误")
					return false;
				} else {
					const {err,res} = await this.$request.post("/chss/user/bind_invite_code", {
						address: address, //地址
						invite_code: this.inp_invite, //邀请码
					});
					if (err === null) {
						Toast.success(this.$t('tis.bind_Success'))
						console.log("绑定成功")
						setTimeout( () =>{
							this.$emit('gddocu')
							this.OpClose();
						},1000)
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ov {
		position: fixed;
		z-index: -5;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0;

		transition: all 1s;
		-webkit-transition: all 1s;
		-moz-transition: all 1s;
		-o-transition: all 1s;

		&.on {
			z-index: 98;
			opacity: 0.5;
		}
	}

	.pop {
		position: fixed;
		text-align: center;
		top: 50%;
		left: 50%;
		z-index: -1;
		opacity: 0;
		border-radius: 10px;
		overflow: hidden;


		transform: translate(-50%, -50%) scale(2, 2);
		-webkit-transform: translate(-50%, -50%) scale(2, 2);
		-moz-transform: translate(-50%, -50%) scale(2, 2);
		-ms-transform: translate(-50%, -50%) scale(2, 2);
		-o-transform: translate(-50%, -50%) scale(2, 2);


		transition: all 1s;
		-webkit-transition: all 1s;
		-moz-transition: all 1s;
		-ms-transition: all 1s;
		-o-transition: all 1s;

		&.on {
			opacity: 1;
			z-index: 99;
			transform: translate(-50%, -50%) scale(1);
			-webkit-transform: translate(-50%, -50%) scale(1);
			-moz-transform: translate(-50%, -50%) scale(1);
		}
	}

	.key {
		padding: 30px;
		text-align: center;
		background: #20283d;

		.tit {
			font-size: 30px;
			color: #aaa;
		}

		.input {
			height: 90px;
			line-height: 90px;
			width: 600px;
			border-radius: 50px;
			border: 2px solid #2c395d;
			display: flex;
			margin: 40px 0px;

			.keyteo {
				color: #496296;
				font-size: 30px;
			}

			input {
				padding: 0px 30px;
				flex: 1;
				background: transparent;
				border: none;
				font-size: 28px;
				height: 100%;
				text-align: left;
			}

			.iconfont {
				height: 50px;
				line-height: 50px;
				margin: 20px 20px;
				font-size: 50px;
			}

		}

		.f-btn {
			display: flex;
			justify-content: space-between;
			padding: 20px 0px;

			.btn-border {
				width: 45%;
				padding: 2px;
				border-radius: 35px;
				background: -moz-linear-gradient(#59e4f2, #1d65cd);
				background: -webkit-linear-gradient(#59e4f2, #1d65cd);
				background: -o-linear-gradient(#59e4f2, #1d65cd);
				background: -ms-linear-gradient(#59e4f2, #1d65cd);
				background: linear-gradient(#59e4f2, #1d65cd);
			}

			.sub {
				font-size: 25px;
				height: 60px;
				line-height: 60px;
				border-radius: 35px;
				background: #2c395d;
				color: #FFF;

				&.on {
					background: -moz-linear-gradient(to top right, #1368f8, #5ef2ff);
					background: -webkit-linear-gradient(to top right, #1368f8, #5ef2ff);
					background: -o-linear-gradient(to top right #1368f8, #5ef2ff);
					background: -ms-linear-gradient(to top right, #1368f8, #5ef2ff);
					background: linear-gradient(to top right, #1368f8, #5ef2ff);
					color: #333;
				}
			}
		}

	}

	.radio {
		text-align: center;
		margin: 50px 0px;

		.rad {
			height: 60px;
			line-height: 60px;
			position: relative;
			z-index: 1;
			border-radius: 10px;
			width: 200px;
			margin: 0px 30px;
			display: inline-block;

			input {
				position: absolute;
				margin: 0px;
				top: 0px;
				left: 0px;
				width: 100%;
				height: 100%;
				opacity: 0;
				z-index: 2;
			}

			&.on {
				border: 2px solid #07ACCA;
			}
		}
	}
</style>
